<template>
  <div class="feature">
    <el-row>
      <el-col :span="12">
        <img class="img" src="~/static/img/feature.png" alt="">
      </el-col>
      <el-col :span="12">
        <div class="subject">
          <div class="title">
            众多组件快搭建速
          </div>
          <div class="desc">提供了Element-UI大部分UI组件，直接在Django中使用，还支持多款皮肤只有切换，满足个性化需求。</div>
          <div style="margin-top: 10px;">
            <el-link target="_blank" :href="demo" type="primary">立即体验</el-link>
            <el-link type="danger" href="#buy">现在购买</el-link>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import config from "@/utils/config";

export default {
  name: "Feature",
  data() {
    return {
      demo: config.pro.demo,
    }
  }
}
</script>

<style scoped lang="less">
.feature {
  background-color: #f6f6f6;

  .img {
    height: 430px;
  }

  .subject {
    margin-top: 200px;
    width: 300px;

    .title {
      color: #3080fe;
      font-size: 36px;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: #94b7fb 2px solid;
    }

    .desc {
      max-width: 280px;
      color: #6d7a82;
      font-size: 16px;
      line-height: 26px;
    }
  }
}
</style>
